<template>
  <div class="divWarehouse divLoseProfit">
    <div class="divHead box">
      <div>
      <el-form
          ref="ruleForm"
          :inline="true"
          :model="searchParams"
        >
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item
              label="损益单号"
              prop="code"
              >
                <el-input
                  placeholder="请输入"
                  v-model="searchParams.code"
                  clearable
                />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="损益单状态"
              prop="status"
            >
              <el-select
                v-model="searchParams.status"
                clearable
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in loseProfitStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="货主名称"
              prop="ownerName"
            >
                <el-input
                  placeholder="请输入"
                  v-model="searchParams.ownerName"
                  clearable
                />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="textRight">
              <base-button
                class="minorImportantButton btnSearch"
                @click="getList"
              >搜索</base-button>
              <base-button class="unimportanceButton" @click="btnResetClick">重置</base-button>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item
              label="货品名称"
              prop="goodsName"
            >
                <el-input
                  placeholder="请输入"
                  v-model="searchParams.goodsName"
                  clearable
                />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      </div>
    </div>
    <div class="divContent box" style="padding-top:20px">
        <div  v-if="tableData.length>0">
        <div class="divTableTitle">
            <span class="spanLabel">合计</span><span class="spanValue">{{sumNum}}个</span><span class="spanValue">{{sumMoney}}元</span>
        </div>
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          :header-cell-style="{ background: '#f9f6ee' }"
        >
          <el-table-column
            type="index"
            align="center"
            width="68"
            label="序号"
          />
          <el-table-column
            prop="code"
            align="center"
            label="损益单号"
            width="160"
          />
          <el-table-column
            prop="warehouseName"
            align="center"
            label="仓库名称"
            width="150"
          />
          <el-table-column
            prop="areaName"
            align="center"
            label="库区名称"
            width="160"
          />
          <el-table-column
            prop="locationName"
            align="center"
            label="库位名称"
            width="160"
          />
          <el-table-column
            prop="ownerName"
            align="center"
            label="货主名称"
            width="160"
            sortable
          />
          <el-table-column
            prop="goodsName"
            align="center"
            label="货品名称"
            width="160"
            sortable
          />
          <el-table-column
            prop="idNum"
            align="center"
            label="损益数量"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="idMoney"
            align="center"
            label="损益金额（元）"
            width="160"
            sortable
          >
          </el-table-column>
          <el-table-column
            prop="createName"
            align="center"
            label="创建人"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            align="center"
            label="创建时间"
            width="200"
            sortable
          >
          </el-table-column>
          <el-table-column
            prop="idSource"
            align="center"
            label="损益来源"
            width="150"
            :filters="[{text: '盘点', value: 'PD'}, {text: '上架', value: 'SJ'},{text: '拣货', value: 'JH'}]"
            :filter-method="filterHandler"
          >
            <template slot-scope="{row}">
              <span v-if="row.idSource === 'PD'">盘点</span>
              <span v-if="row.idSource === 'SJ'">上架</span>
              <span v-if="row.idSource === 'JH'">拣货</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="taskCode"
            align="center"
            label="任务编号"
            width="160"
          />
          <el-table-column
            prop="status"
            align="center"
            label="损益单状态"
            width="160"
            :filters="[{text: '新建', value: 1}, {text: '已调整', value: 2}, {text: '已取消', value: 3}]"
            :filter-method="filterHandler"
          >
            <template slot-scope="{row}">
              <span v-if="row.status === 1">新建</span>
              <span v-if="row.status === 2 ">已调整</span>
              <span v-if="row.status === 3 ">已取消</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="updateName"
            align="center"
            label="处理人"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="updateTime"
            align="center"
            label="处理时间"
            width="200"
            sortable
          >
          </el-table-column>
          <el-table-column label="操作" align="center" width="250" fixed="right">
            <template slot-scope="{row}">
              <base-button class="fontOperateButton"   @click="btnChangeStorageClick(row)" v-if="row.status === 1">调整库存</base-button>
              <base-button class="fontOperateButton"   @click="btnCancleUpdateClick(row)" v-if="row.status === 1">取消调整</base-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
      <base-pagination :total="paging.total" :limit="paging.size" @current-change="handleCurrentChange"  @size-change="handleSizeChange"></base-pagination>
      </div>
      <div
        v-else
        class="emptyTip"
      >
        <span class="imgIcon"></span>
        <p>暂无库存损益</p>
      </div>
    </div>
    <base-dialog  :title="dialogData.title"
                    :visible="dialogData.visible"
                    :msg="dialogData.msg"
                    :subMsg="dialogData.subMsg"
                    @btn-cancle-click="dialogData.visible= false"
                    @btn-sure-click ="btnSureClick"
    ></base-dialog>
    <base-dialog  :title="cancleUpdateDialogData.title"
                    :visible="cancleUpdateDialogData.visible"
                    :msg="cancleUpdateDialogData.msg"
                    @btn-cancle-click="cancleUpdateDialogData.visible= false"
                    @btn-sure-click ="btnCancleUpdateSureClick"
    ></base-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import BaseButton from '@/components/base-button/index.vue'
import BasePagination from '@/components/base-pagination/index.vue'
import { ILoseProfitTableData } from '@/module-storage/interface/lose-profit'
import { findAllLoSeProfitDetailPaging, updateStorage, getSumData, cancleUpdate } from '@/module-storage/api/lose-profit'
import { loseProfitStatusOptions } from '@/utils/common-select-data'
import { ICommonReturn, ICommonSelectOptions } from '@/utils/common-interface'
import BaseDialog from '@/components/base-dialog/index.vue'
import { getStorage } from '@/module-storage/api/storage'

@Component({
  name: 'CheckList',
  components: {
    BaseButton,
    BasePagination,
    BaseDialog
  }
})
export default class extends Vue {
  private tableData: ILoseProfitTableData[] = []

  private loading = false

  private paging = {
    current: 1, // 当前页码
    size: 10, // 每页数据量
    total: 0
  }

  private searchParams = {
    code: '',
    status: undefined,
    ownerName: '',
    goodsName: ''
  }

  private dialogData ={
    id: 0,
    title: '',
    visible: false,
    msg: '',
    subMsg: ''
  }

  private cancleUpdateDialogData ={
    id: 0,
    title: '',
    visible: false,
    msg: ''
  }

  private loseProfitStatusOptions=[] as ICommonSelectOptions[]

  private sumNum = 0
  private sumMoney = 0

  @Watch('$route', { immediate: true })
  private onRouteChange() {
    this.loseProfitStatusOptions = loseProfitStatusOptions
    this.getList()
  }

  private getParams() {
    const current = this.paging.current
    const size = this.paging.size
    const params = {
      ...this.searchParams,
      current,
      size
    }
    if (params.status === '') {
      delete params.status
    }
    return params
  }

  private async getList() {
    this.loading = true
    const params = this.getParams()
    Promise.all([findAllLoSeProfitDetailPaging(params), getSumData()]).then(res => {
      this.tableData = res[0].data.records
      this.paging.total = parseInt(res[0].data.total, 10)
      this.sumNum = res[1].data.total
      this.sumMoney = res[1].data.money
      this.loading = false
    })
  }

  private handleCurrentChange(page:number) {
    this.paging.current = page
    this.getList()
  }

  private handleSizeChange(page:number) {
    this.paging.size = page
    this.paging.current = 1
    this.getList()
  }

  private filterHandler(value:any, row:any, column:any) {
    const property = column.property
    return row[property] === value
  }

  private btnResetClick() {
    (this.$refs as any).ruleForm.resetFields()
    this.getList()
  }

  private async btnChangeStorageClick(row:ILoseProfitTableData) {
    const { data } = await getStorage(row.stockId)
    this.dialogData = {
      id: row.id,
      title: '调整库存',
      visible: true,
      msg: '确认调整库存吗？',
      subMsg: `库存将从${data.free}调整成${data.free + row.idNum}`
    }
  }

  private async btnSureClick() {
    const data = ((await updateStorage({ id: this.dialogData.id })) as unknown) as ICommonReturn
    this.dialogData.visible = false
    if (data.code === 0) {
      this.$message.success('修改成功')
      this.getList()
    } else {
      this.$message.error(data.msg)
    }
  }

  private btnCancleUpdateClick(row:ILoseProfitTableData) {
    this.cancleUpdateDialogData = {
      id: row.id,
      title: '调整库存',
      visible: true,
      msg: '确认取消调整吗？'
    }
  }

  private async btnCancleUpdateSureClick() {
    const data = ((await cancleUpdate({ id: this.cancleUpdateDialogData.id })) as unknown) as ICommonReturn
    this.cancleUpdateDialogData.visible = false
    if (data.code === 0) {
      this.$message.success('修改成功')
      this.getList()
    } else {
      this.$message.error(data.msg)
    }
  }
}
</script>

<style lang="scss"   scoped >
.divLoseProfit{
  .divHead{
    height: 215px;
  }
    .divTableTitle{
      margin: 0 0 20px 20px;
      background: #FFF9EB;
      border: 1px solid #FFB200;
      height: 32px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 32px;
      padding-left: 9px;
      width: fit-content;
      .spanLabel{
        color: #332929;
        margin-right: 9px;
      }
      .spanValue{
        padding-right: 18px;
        color: #FFB200;
      }
    }
}
</style>
